<template>
    <div class="base-box" :class="typeObject[row[props.objectKey]]">
        {{ row[props.objectKey] }}
    </div>
</template>

<script setup>
const props = defineProps({
    row: {
        type: Object,
    },
    objectKey:{
        type:String,
        default:'status'
    }
})
const typeObject = {
    '未收运': 'noClean',
    '未接单': 'noClean',
    '已接单': 'cleaning',
    '已收运': 'cleaned'
}
</script>

<style lang="scss" scoped>
.noClean {
    color: rgba(255, 255, 255, 1);
    background: rgba(197, 207, 224, 1);
}

.cleaning {
    color: rgba(36, 211, 255, 1);
    background: rgba(36, 211, 255, 0.2);
}

.cleaned {
    color: rgba(14, 204, 90, 1);
    background: rgba(208, 243, 222, 1);
}

.base-box {
    width: 54px;
    height: 28px;
    border-radius: 4px;
    margin: 0 auto;
}

</style>